<template>
  <div class="detail-container">
    <div class="header">
      <div class="back-btn" @click="goBack">返回</div>
      <h1>音乐详情</h1>
      <div class="placeholder"></div>
    </div>

    <div class="content">
      <div v-if="musicInfo" class="music-info">
        <div class="cover-container">
          <div class="cover" v-if="musicInfo.cover">
            <img
              :src="musicInfo.cover"
              :alt="`${musicInfo.title} - ${musicInfo.artist}`"
              class="album-cover"
            />
          </div>
          <div class="cover" v-else>
            <svg width="64" height="64" viewBox="0 0 24 24" fill="#fff">
              <path
                d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"
              />
            </svg>
          </div>
        </div>

        <div class="basic-info">
          <h2 class="title">{{ musicInfo.title }}</h2>
          <p class="artist">{{ musicInfo.artist }}</p>
          <p class="album">{{ musicInfo.album }}</p>
        </div>

        <div class="detail-list">
          <div class="detail-item">
            <span class="label">作曲：</span>
            <span class="value">{{ musicInfo.composer }}</span>
          </div>
          <div class="detail-item">
            <span class="label">作词：</span>
            <span class="value">{{ musicInfo.lyricist }}</span>
          </div>
          <div class="detail-item">
            <span class="label">发行日期：</span>
            <span class="value">{{ musicInfo.releaseDate }}</span>
          </div>
          <div class="detail-item">
            <span class="label">时长：</span>
            <span class="value">{{ musicInfo.duration }}</span>
          </div>
          <div class="detail-item">
            <span class="label">流派：</span>
            <span class="value">{{ musicInfo.genre }}</span>
          </div>
        </div>

        <div class="actions">
          <button class="action-btn" @click="playMusic">
            <svg v-if="!isPlaying" width="20" height="20" viewBox="0 0 24 24" fill="#fff">
              <path d="M8 5v14l11-7z" />
            </svg>
            <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="#fff">
              <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
            </svg>
            <span>{{ isPlaying ? "暂停播放" : "播放音乐" }}</span>
          </button>
          <button class="action-btn" @click="shareMusic">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff">
              <path
                d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"
              />
            </svg>
            <span>分享</span>
          </button>
        </div>
      </div>

      <div v-else class="no-data">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="#ccc">
          <path
            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
          />
        </svg>
        <p>暂无音乐信息</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      musicInfo: null,
      audioPlayer: null,
      isPlaying: false,
    };
  },
  created() {
    // 从路由参数中获取音乐信息
    if (this.$route.query.musicInfo) {
      try {
        this.musicInfo = JSON.parse(this.$route.query.musicInfo);
      } catch (error) {
        console.error("解析音乐信息失败:", error);
      }
    }
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    async playMusic() {
      try {
        // 如果已经有音频在播放，先停止
        if (this.audioPlayer) {
          if (this.isPlaying) {
            this.audioPlayer.pause();
            this.isPlaying = false;
            return;
          } else {
            // 恢复播放
            this.audioPlayer.play();
            this.isPlaying = true;
            return;
          }
        }

        // 构建搜索关键词
        const searchQuery = encodeURIComponent(
          `${this.musicInfo.title} ${this.musicInfo.artist}`
        );

        // 由于无法直接播放音乐，我们使用模拟方式或跳转到音乐平台
        const musicPlatforms = [
          `https://music.163.com/#/search/m/?s=${searchQuery}&type=1`,
          `https://y.qq.com/n/yqq/song/001RGrEX2p8rPB.html?ADTAG=search&wmid=0&songmid=`,
          `https://music.apple.com/search?term=${searchQuery}`,
          `https://open.spotify.com/search/${searchQuery}`,
        ];

        // 显示音乐平台选择
        if (
          confirm("我们将为您打开音乐平台搜索该歌曲。\n是否在新窗口打开网易云音乐搜索？")
        ) {
          window.open(musicPlatforms[0], "_blank");
        }

        // 模拟本地音频播放（实际项目中需要音频URL）
        console.log("尝试播放音乐:", this.musicInfo.title, "-", this.musicInfo.artist);
        this.isPlaying = false; // 重置播放状态
      } catch (error) {
        console.error("播放音乐失败:", error);
        alert("无法播放音乐，请检查网络连接后重试");
      }
    },
    async shareMusic() {
      try {
        // 准备分享内容
        const shareTitle = `${this.musicInfo.title} - ${this.musicInfo.artist}`;
        const shareText = `我发现了一首好听的歌: ${this.musicInfo.title} - ${this.musicInfo.artist}，快来听听吧！`;
        const shareUrl = window.location.href;

        // 检查浏览器是否支持Web Share API
        if (navigator.share) {
          await navigator.share({
            title: shareTitle,
            text: shareText,
            url: shareUrl,
          });
          console.log("分享成功");
        } else {
          // 降级方案：复制到剪贴板
          const shareContent = `${shareTitle}\n${shareText}\n${shareUrl}`;

          try {
            // 使用现代的剪贴板API
            await navigator.clipboard.writeText(shareContent);
            alert("音乐信息已复制到剪贴板，您可以手动分享");
          } catch (clipboardError) {
            // 最基本的降级方案
            const textArea = document.createElement("textarea");
            textArea.value = shareContent;
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand("copy");
            document.body.removeChild(textArea);
            alert("音乐信息已复制到剪贴板，您可以手动分享");
          }
        }
      } catch (error) {
        console.error("分享失败:", error);
        if (error.name !== "AbortError") {
          // 用户取消分享不算错误
          alert("分享失败，请稍后重试");
        }
      }
    },
  },
};
</script>

<style scoped>
.detail-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.back-btn {
  height: 40px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.header h1 {
  font-size: 20px;
  color: #333;
  margin: 0;
}

.placeholder {
  width: 40px;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.music-info {
  background-color: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.cover-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.cover {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.album-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.basic-info {
  text-align: center;
  margin-bottom: 30px;
}

.title {
  font-size: 24px;
  color: #333;
  margin: 0 0 10px 0;
  font-weight: bold;
}

.artist {
  font-size: 18px;
  color: #666;
  margin: 0 0 5px 0;
}

.album {
  font-size: 16px;
  color: #999;
  margin: 0;
}

.detail-list {
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.detail-item {
  display: flex;
  margin-bottom: 15px;
}

.label {
  width: 80px;
  font-size: 16px;
  color: #999;
}

.value {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.actions {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 50px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn span {
  margin-left: 8px;
}

.action-btn:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}

.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
}

.no-data p {
  margin-top: 20px;
  color: #999;
  font-size: 16px;
}
</style>
